<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>S11e network系统架构图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            .network-features,
            .wallet-features {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 1024px) {
            .frontend-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        /* 主标题样式 */
        .main-title {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 25px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .main-title::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .main-title h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 1;
        }
        
        .main-title .subtitle {
            font-size: 16px;
            opacity: 0.9;
            font-weight: 300;
            position: relative;
            z-index: 1;
        }
        
        .layer {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        
        .layer:last-child {
            border-bottom: none;
        }
        
        .layer-title {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            padding: 10px 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        
        /* 用户触点层 */
        .frontend-layer {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .frontend-layer .layer-title {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            backdrop-filter: blur(10px);
        }
        
        .frontend-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        
        .frontend-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 15px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .frontend-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .frontend-item h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .frontend-item ul {
            list-style: none;
        }
        
        .frontend-item li {
            padding: 5px 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
        }
        
        /* 核心产品服务层 */
        .service-layer {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }
        
        .service-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .service-item {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border-left: 4px solid #ff6b6b;
        }
        
        .service-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        
        .service-item h3 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .service-item .subtitle {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .service-item ul {
            list-style: none;
        }
        
        .service-item li {
            padding: 6px 0;
            color: #34495e;
            font-size: 14px;
            position: relative;
            padding-left: 15px;
        }
        
        .service-item li::before {
            content: "•";
            color: #ff6b6b;
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        .wallet-section {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-top: 15px;
        }
        
        .wallet-section h3 {
            font-size: 22px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .wallet-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
        }
        
        .wallet-feature {
            background: rgba(255, 255, 255, 0.2);
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-size: 13px;
            backdrop-filter: blur(5px);
        }
        
        /* 协议与基础设施层 */
        .protocol-layer {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }
        
        .protocol-section {
            background: white;
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        }
        
        .protocol-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }
        
        .protocol-content {
            padding: 15px;
        }
        
        .protocol-layers {
            display: grid;
            gap: 10px;
        }
        
        .protocol-row {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 20px;
            align-items: center;
            padding: 12px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            border: 1px solid #dee2e6;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .protocol-label {
            font-weight: bold;
            color: #2c3e50;
            font-size: 14px;
        }
        
        .protocol-items {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .protocol-tag {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
            padding: 8px 18px;
            border-radius: 25px;
            font-size: 13px;
            white-space: nowrap;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .protocol-tag:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
            background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
        }
        
        .network-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .network-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .network-feature {
            background: rgba(255, 255, 255, 0.15);
            padding: 15px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }
        
        .ai-section {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            color: white;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
        }
        
        .ai-features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }
        
        .ai-feature {
            background: rgba(255, 255, 255, 0.2);
            padding: 10px 15px;
            border-radius: 25px;
            font-size: 14px;
            backdrop-filter: blur(5px);
        }
        
        .connection-arrow {
            text-align: center;
            font-size: 24px;
            color: #7f8c8d;
            padding: 10px 0;
        }
        
        @media (max-width: 768px) {
            .main-title h1 {
                font-size: 28px;
            }
            
            .main-title .subtitle {
                font-size: 16px;
            }
            
            .main-title {
                padding: 30px 20px;
            }
            
            .container {
                margin: 10px;
                border-radius: 15px;
            }
            
            .layer {
                padding: 20px;
            }
            
            .layer-title {
                font-size: 20px;
            }
            
            .frontend-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .service-grid {
                grid-template-columns: 1fr;
            }
            
            .protocol-row {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 主标题 -->
        <div class="main-title">
            <h1>S11e network 系统架构图</h1>
            <div class="subtitle">全链路数字商业生态系统架构</div>
        </div>
        
        <!-- 用户触点层 -->
        <div class="layer frontend-layer">
            <div class="layer-title">用户触点层（前端产品）</div>
            <div class="frontend-grid">
                <div class="frontend-item">
                    <h3>消费者端</h3>
                    <ul>
                        <li>Jiujiu小程序</li>
                        <li>社区任务面板</li>
                        <li>AR体验空间</li>
                    </ul>
                </div>
                <div class="frontend-item">
                    <h3>商户端</h3>
                    <ul>
                        <li>Bigan智慧门店</li>
                        <li>Baigui POS</li>
                        <li>商户工作台</li>
                    </ul>
                </div>
                <div class="frontend-item">
                    <h3>运营端</h3>
                    <ul>
                        <li>城市运营后台</li>
                        <li>数据看板</li>
                        <li>治理系统</li>
                    </ul>
                </div>
                <div class="frontend-item">
                    <h3>开发者端</h3>
                    <ul>
                        <li>开发者控制台</li>
                        <li>API文档</li>
                        <li>SDK工具</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 核心产品服务层 -->
        <div class="layer service-layer">
            <div class="layer-title">核心产品服务层（中台业务）</div>
            <div class="service-grid">
                <div class="service-item">
                    <h3>Bigan 系统： 商户端</h3>
                    <div class="subtitle">智慧门店运营</div>
                    <ul>
                        <li>会员管理</li>
                        <li>商品管理</li>
                        <li>AI导购助手</li>
                        <li>库存供应链</li>
                        <li>运营数据分析</li>
                        <li>营销活动引擎</li>
                    </ul>
                </div>
                <div class="service-item">
                    <h3>Baigui 系统：商户端</h3>
                    <div class="subtitle">支付收银</div>
                    <ul>
                        <li>多币种支付网关</li>
                        <li>智能合约结算</li>
                        <li>积分返利机制</li>
                        <li>交易数据上链</li>
                        <li>风控反欺诈</li>
                        <li>财务对账系统</li>
                    </ul>
                </div>
                <div class="service-item">
                    <h3>Jiujiu 系统：消费者端</h3>
                    <div class="subtitle">品牌社区共创</div>
                    <ul>
                        <li>数字积分系统</li>
                        <li>通证经济模型</li>
                        <li>品牌共创工具</li>
                        <li>社区治理系统</li>
                        <li>提案投票机制</li>
                        <li>内容创作平台</li>
                    </ul>
                </div>
                <div class="service-item">
                    <h3>火源钱包（HY Wallet）</h3>
                    <div class="subtitle">数字资产管理及支付系统</div>
                    <ul>
                        <li>WaaS钱包服务</li>
                        <li>MPC多方计算</li>
                        <li>社交恢复机制</li>
                        <li>多链资产管理</li>
                        <li>火源积分管理</li>
                        <li>原力代币</li>
                        <li>火钻资产</li>
                        <li>跨链桥接服务</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 协议与基础设施层 -->
        <div class="layer protocol-layer">
            <div class="layer-title">协议与基础设施层</div>
            
            <div class="protocol-section">
                <div class="protocol-header">S11e Protocol 协议栈</div>
                <div class="protocol-content">
                    <div class="protocol-layers">
                        <div class="protocol-row">
                            <div class="protocol-label">应用层</div>
                            <div class="protocol-items">
                                <span class="protocol-tag">品牌协议</span>
                                <span class="protocol-tag">商城协议</span>
                                <span class="protocol-tag">任务协议</span>
                                <span class="protocol-tag">治理协议</span>
                                <span class="protocol-tag">RWA协议</span>
                            </div>
                        </div>
                        <div class="protocol-row">
                            <div class="protocol-label">数据层</div>
                            <div class="protocol-items">
                                <span class="protocol-tag">交易数据</span>
                                <span class="protocol-tag">行为数据</span>
                                <span class="protocol-tag">积分数据</span>
                                <span class="protocol-tag">身份数据</span>
                                <span class="protocol-tag">资产数据</span>
                            </div>
                        </div>
                        <div class="protocol-row">
                            <div class="protocol-label">身份层</div>
                            <div class="protocol-items">
                                <span class="protocol-tag">DID身份</span>
                                <span class="protocol-tag">火源兽NFT</span>
                                <span class="protocol-tag">多链绑定</span>
                                <span class="protocol-tag">信用评级</span>
                                <span class="protocol-tag">权限管理</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="network-section">
                <h3>S11e Network 区块链网络</h3>
                <div class="network-features">
                    <div class="network-feature">
                        <strong>高性能 Layer2 网络</strong><br>
                        EVM兼容智能合约引擎
                    </div>
                    <div class="network-feature">
                        <strong>联合曲线机制</strong><br>
                        跨链互操作协议
                    </div>
                    <div class="network-feature">
                        <strong>去中心化存储</strong><br>
                        预言机数据服务
                    </div>
                    <div class="network-feature">
                        <strong>共识算法优化</strong><br>
                        网络治理机制
                    </div>
                </div>
            </div>
            
            <div class="ai-section">
                <h3>app-agent: AI服务平台</h3>
                <div class="ai-features">
                    <div class="ai-feature">GPT任务引擎</div>
                    <div class="ai-feature">用户画像AI</div>
                    <div class="ai-feature">推荐算法</div>
                    <div class="ai-feature">内容审核</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>